<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    :title="title ? `${title} - ${FormModeEntityRef.Display}` : FormModeEntityRef.Display"
    @ok="handleOk"
    @keypress.enter="handleOk"
  >
    <BasicForm @register="registerForm" />
  </BasicModal>
</template>

<script lang="ts">
  import { PropType, unref, defineComponent, ref } from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { BasicForm, useForm, FormSchema } from '@/components/Form';
  import { useMessage } from '@/hooks/web/useMessage';

  import { isFunction } from '@/utils/is';
  import { propTypes } from '@/utils/propTypes';
  import { FormModeEnum, FormModeEntity } from '@/enums/formEnum';
  import { FetchParams } from '@/components/Table';
  import { AjaxResult } from '@/api/model';
  import { ApplyIpnToComplete } from './ipn.api';

  export default defineComponent({
    name: 'IPNNoModal',
    components: {
      BasicModal,
      BasicForm,
    },
    props: {
      /** 表单抬头 */
      title: propTypes.string,
      /** 关闭按钮文本 */
      cancelText: propTypes.string,
      /** 确认按钮文本 */
      okText: propTypes.string,
      /** 回调方法 */
      reloadFunc: {
        type: Function as PropType<(opt?: FetchParams) => Promise<Recordable<any>[] | undefined>>,
        default: null,
      },
    },
    setup(props) {
      const { createMessage } = useMessage();
      const FormModeEntityRef = ref<FormModeEntity>(new FormModeEntity(FormModeEnum.Ok));
      const schemas: FormSchema[] = [
        {
          field: 'Id',
          label: '主键',
          helpMessage: '',
          component: 'Input',
          componentProps: {
            disabled: true,
          },
        },
        {
          field: 'IPNNo',
          label: 'IPN编号',
          helpMessage: '',
          required: true,
          component: 'InputTextArea',
        },
      ];
      const [registerForm, formMethods] = useForm({
        /** 表单配置 */
        schemas: schemas,
        /** 扩展 form 组件，增加 label 宽度，表单内所有组件适用，可以单独在某个项覆盖或者禁用 */
        labelWidth: 120,
        /** 是否显示操作按钮(重置/提交) */
        showActionButtonGroup: false,
        baseColProps: {
          offset: 3,
          // span: 24,
          xs: 16, // <576px
          sm: 16, // ≥576px
          md: 16, // ≥768px
          lg: 16, // ≥992px
          xl: 16, // ≥1200px
          xxl: 16, // ≥1600px
          // xxxl: 24, // ≥2000px 3.0
        },
      });

      const [registerModal, modalMethods] = useModalInner(async (data) => {
        modalMethods.setModalProps({
          canFullscreen: true,
          centered: false,
          maskClosable: false,
          destroyOnClose: true,
          width: '50%',
          minHeight: 200,
        });
        formMethods.resetFields();
        modalMethods.changeLoading(true);
        try {
          if (data.formMode) {
            FormModeEntityRef.value = new FormModeEntity(data.formMode as FormModeEnum);
          }

          if (data.record) {
            formMethods.setFieldsValue({
              ...data.record,
            });
          }
        } finally {
          modalMethods.changeLoading(false);
        }
      });

      async function handleOk() {
        const data = await formMethods.validate();
        if (!data) return;
        openLoading();
        try {
          const formField = formMethods.getFieldsValue();
          let ajaxResult: AjaxResult<any> | null = null;
          ajaxResult = await ApplyIpnToComplete(formField);

          modalMethods.closeModal();
          if (props.reloadFunc && isFunction(props.reloadFunc)) {
            await props.reloadFunc();
          }
          if (ajaxResult?.Type === 200) {
            createMessage.success('成功');
          }
        } finally {
          closeLoading();
        }
      }

      //#region "加载状态"
      const loadingRef = ref(false);
      /** 开启加载状态 */
      function openLoading() {
        modalMethods.changeLoading(true);
        modalMethods.setModalProps({ confirmLoading: true, cancelButtonProps: { loading: true } });
        loadingRef.value = true;
      }

      /** 关闭加载状态 */
      function closeLoading() {
        modalMethods.changeLoading(false);
        modalMethods.setModalProps({
          confirmLoading: false,
          cancelButtonProps: { loading: false },
        });
        loadingRef.value = false;
      }
      //#endregion

      return {
        registerForm,
        registerModal,
        FormModeEntityRef,
        handleOk,
      };
    },
  });
</script>
<style lang="less"></style>
